<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template.js使用</title>
    <script src="../lib/template-web.js"></script>
    <script src="../lib/jquery.js"></script>
</head>

<body>
    <div id="container"></div>
    
    <script type="text/html" id="tpl-use">
        <!-- 标准语法 -->
      <h1>name:{{name}}&age:{{age}}</h1>
      <!-- 原文输出 -->
      {{@ test}}原文输出
      <!-- 条件输出 -->
<div>
    {{if flag===0}}flag=0
    {{else if flag==1}}flag=1
    {{/if}}
</div>
<!-- 循环输出 -->
<ul>
    {{each hobby}}
    <li>index:{{$index+1}}.{{$value}}</li>
    {{/each}}
</ul>
<!-- 过滤器 -->
<div>学习时间：{{regTime|dateFormat}}</div>
    </script>
  
    <script>
    //   定义过滤器
  template.defaults.imports.dateFormat=(date)=>{
      var y=date.getFullYear();
      var m=date.getMonth()+1;
      var d=date.getDate();
      return y+'年'+m+'月'+d+'日'
  }
      // 2. 定义需要渲染的数据
      var data = {
        name: 'hola',
        age: 20,
        test: '<h3>测试原文输出</h3>',
        flag:1,
        hobby:['game','sleep','eat'],
        regTime:new Date()
      }
  
      // 4. 调用 template 函数
      var htmlStr = template('tpl-use', data)
      console.log(htmlStr)
      // 5. 渲染HTML结构
      $('#container').html(htmlStr)

    </script>
</body>

</html>